<template>
  <div ref="mapContainer" class="map-container"></div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';

const mapContainer = ref(null);
const map = ref(null);
const marker = ref(null);
const circle = ref(null);
const polygon = ref(null);

// 定义props
const props = defineProps({
  center: {
    type: Array,
    default: () => [39.90923, 116.397428]
  },
  zoom: {
    type: Number,
    default: 13
  }
});

onMounted(() => {
  // 初始化地图
  map.value = L.map(mapContainer.value).setView(props.center, props.zoom);

  // 添加高德地图图层
  L.tileLayer('https://webrd0{s}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}', {
    subdomains: '1234',
    attribution: '© 高德地图'
  }).addTo(map.value);

  // 初始化地图元素
  initMapElements();
});

onUnmounted(() => {
  // 清理地图实例
  if (map.value) {
    map.value.remove();
  }
});

// 封装地图元素初始化方法
const initMapElements = () => {
  // 添加标记点
  marker.value = L.marker(props.center).addTo(map.value);
  marker.value.bindPopup("<b>北京天安门</b><br>中国首都的中心位置.").openPopup();

  // 添加圆形区域
  circle.value = L.circle(props.center, {
    color: 'red',
    fillColor: '#f03',
    fillOpacity: 0.5,
    radius: 500
  }).addTo(map.value);
  circle.value.bindPopup("天安门周边区域");

  // 添加多边形
  polygon.value = L.polygon([
    [39.91923, 116.387428],
    [39.92923, 116.397428],
    [39.91923, 116.407428]
  ]).addTo(map.value);
  polygon.value.bindPopup("这是一个多边形区域");

  // 添加点击事件
  map.value.on('click', onMapClick);
};

// 封装地图点击方法
const onMapClick = (e) => {
  L.popup()
    .setLatLng(e.latlng)
    .setContent(`你点击了地图位置: ${e.latlng.toString()}`)
    .openOn(map.value);
};

// 封装对外暴露的方法
defineExpose({
  // 设置地图中心点
  setCenter: (latlng) => {
    map.value.setView(latlng);
  },
  // 添加自定义标记
  addMarker: (latlng, popupContent) => {
    const newMarker = L.marker(latlng).addTo(map.value);
    if (popupContent) {
      newMarker.bindPopup(popupContent);
    }
    return newMarker;
  }
});
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100vh;
}
</style>